<template>
  <div v-show="comments">
    <div class="comment" v-for="item in comments" :key="item.commentId">
      <div class="left">
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div class="right">
        <p class="nickname">
          <img src="../assets/user.png" alt="" />{{ item.user.nickname }}
        </p>
        <p class="time">{{ item.time | changetime }}</p>
        <div class="content">{{ item.content }}</div>
        <div class="beRepliy" v-if="item.beReplied.length > 0">
          <span><img :src="item.beReplied[0].user.avatarUrl" alt="" /></span>
          {{ item.beReplied[0].user.nickname }}:
          {{ item.beReplied[0].content }}
          .
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comment",
  data() {
    return {};
  },
  props: {
    comments: Array,
  },
  filters: {
    changetime(val) {
      var date = new Date(val); // 初始化日期
      var year = date.getFullYear(); //获取年份
      var month = date.getMonth() + 1; // 获取月份
      month = month < 10 ? "0" + month : month;
      var day = date.getDate(); // 获取具体日
      day = day < 10 ? "0" + day : day;
      var hour = date.getHours(); // 获取时
      hour = hour < 10 ? "0" + hour : hour;
      var minutes = date.getMinutes(); // 获取分
      minutes = minutes < 10 ? "0" + minutes : minutes;
      return year + "-" + month + "-" + day + "  " + hour + ":" + minutes;
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  width: 100vw;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  .left {
    float: left;
    width: 45px;
    height: 45px;
    img {
      border-radius: 50%;
      width: 45px;
      height: 45px;
    }
  }
  .right {
    float: left;
    width: 80%;
    border-bottom: 1px solid #d0d0d0;
    padding: 0px 0px 10px 20px;
    .nickname {
      font-size: 16px;
      font-weight: bold;
      img {
        height: 18px;
        width: 18px;
        vertical-align: text-bottom;
        margin-right: 4px;
      }
    }
    .time {
      color: #9c9c9c;
    }
    .content {
      font-size: 16px;
      letter-spacing: 1px;
      margin: 10px 0px;
    }
    .beRepliy {
      background-color: #eaeaea;
      padding: 3px;
      padding: 10px;
      line-height: 25px;
      border-radius: 3px;
      span {
        img {
          height: 30px;
          width: 30px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>